<template>
  <div class="page-box flex-col">
    <div class="page-bg" />

    <div class="page-container flex-col">
      <scroll-view class="scroll-box" scroll-y="true">
        <div class="main1 flex-col">
          <u-form
            class="v-form"
            :model="form"
            ref="uForm"
            label-width="160"
            :error-type="['toast']"
          >
            <u-form-item label="服务内容" prop="vasTitle"
              ><u-input
                v-model="form.vasTitle"
                input-align="right"
                placeholder="请选择服务内容"
                type="select"
                @click="showForm = true"
            /></u-form-item>
            <u-form-item label="您的姓名" prop="name"
              ><u-input
                v-model="form.name"
                input-align="right"
                placeholder="请输入你的姓名"
            /></u-form-item>
            <u-form-item label="联系方式" prop="phone"
              ><u-input
                v-model="form.phone"
                input-align="right"
                placeholder="请输入你的联系方式"
            /></u-form-item>
            <u-form-item label="所在省份" prop="province">
              <u-input
                placeholder="请选择省份"
                input-align="right"
                v-model="form.province"
                type="select"
                @click="show = true"
              />
            </u-form-item>
            <u-form-item
              label=""
              prop="agreePrivatePolicy"
              :border-bottom="false"
            >
              <!-- <u-checkbox v-model="form.agreePrivatePolicy">wqw</u-checkbox> -->
            </u-form-item>
          </u-form>
          <span class="info2">售后服务</span>
          <div style="padding-bottom: 400rpx">
            <div
              class="mod4 flex-col"
              v-for="item in serviceList"
              :key="item.id"
              @click="onGotoDetail(item)"
            >
              <div class="outer1 flex-col">
                <div class="mod5 flex-row">
                  <span class="word2"> {{ item.title }}</span>
                  <img
                    class="icon2"
                    referrerpolicy="no-referrer"
                    src="../../static/images/arrow-right.png"
                  />
                </div>
              </div>
            </div>
            <div v-if="loading" class="x-f" style="margin-top: 10px">
              <u-loading mode="circle"></u-loading>
              <div style="margin-left: 10px">加载中..</div>
            </div>
            <u-empty
              v-if="!loading && serviceList.length <= 0"
              text="暂无数据"
              mode="list"
            ></u-empty>
          </div>
        </div>
      </scroll-view>
    </div>
    <div class="fixed-footer">
      <span class="paragraph1" @click="showAgree = true">
        松下会严格按照<em style="color: #ffbf10">《松下隐私政策》</em
        >中的规定保护您的个人信息
        <br />
        请确认是否同意并继续
      </span>
      <div class="mod7 flex-row">
        <u-checkbox
          v-model="form.agreePrivatePolicy"
          active-color="#FF9B28"
        ></u-checkbox>
        <div class="main2">
          <span class="txt4">我已经阅读并完全理解</span>
          <span class="word3" @click="showAgree = true"
            >“松下专业隐私政策”</span
          >
        </div>
      </div>
      <div class="mod8 flex-col">
        <div class="box2 flex-col">
          <div class="outer2 flex-col"></div>
          <button class="outer3 flex-col" @click="submit">
            <span class="info3">提交</span>
          </button>
        </div>
      </div>
    </div>
    <u-modal v-model="showAgree" title="松下专业隐私政策" confirm-text="同意">
      <scroll-view
        class="slot-content"
        style="height: 300px; padding: 10px; box-sizing: border-box"
        scroll-y="true"
        @scrolltolower="onScrollBottom"
      >
        <rich-text :nodes="agreeText"></rich-text>
      </scroll-view>
    </u-modal>
    <u-select
      v-model="showForm"
      :list="serviceList"
      @confirm="onSelect"
      value-name="id"
      label-name="title"
    ></u-select>
    <u-select
      v-model="show"
      :list="provinceList"
      @confirm="onSelectProvince"
    ></u-select>
  </div>
</template>

<script>
import { addService, getServiceList, getConfig } from "@/api";
import { province } from "@/api/province";
export default {
  data() {
    return {
      serviceList: [],
      form: {
        vasId: "",
        vasTitle: "",
        name: "",
        phone: "",
        province: "",
      },
      rules: {
        vasTitle: [
          {
            required: true,
            message: "请选择服务内容",
            trigger: "change",
          },
        ],
        name: [
          {
            required: true,
            message: "请填写联系人",
            trigger: "change",
          },
        ],
        phone: [
          {
            required: true,
            message: "请填写手机号",
            trigger: "change",
          },
        ],
        province: [
          {
            required: true,
            message: "请选择所在省份",
            trigger: "change",
          },
        ],
        // agreePrivatePolicy: [
        //   {
        //     required: true,
        //     message: "请同意隐私政策",
        //     trigger: "change",
        //   },
        // ],
      },
      showAgree: false,
      show: false,
      showForm: false,
      provinceList: province,
      loadingForm: false,
      loading: false,
      agreeText: "",
    };
  },
  created() {
    getServiceList({
      pageSize: 999,
      pageNum: 1,
    }).then((res) => {
      console.log(res);
      this.serviceList = res.rows;
    });
    getConfig(100).then((res) => {
      this.agreeText = res.data.configValue;
    });
  },
  onReady() {
    this.$refs.uForm.setRules(this.rules);
  },
  methods: {
    onSelect(val) {
      this.form.vasId = val[0].value;
      this.form.vasTitle = val[0].label;
    },
    submit() {
      this.$refs.uForm.validate((valid) => {
        if (valid) {
          if (!this.form.agreePrivatePolicy) {
            uni.showModal({
              title: "提示",
              content: "请同意隐私政策",
            });
            return;
          }
          if (this.loadingForm) return;
          this.loadingForm = true;
          const userInfo = uni.getStorageSync("userInfo");
          addService({
            ...this.form,
            userId: userInfo.id,
            openId: userInfo.openId,
            agreePrivatePolicy: 1,
          })
            .then((res) => {
              this.loadingForm = false;
              uni.showModal({
                title: "提示",
                content: "提交成功,稍后将有专业人员回访",
              });
            })
            .catch((err) => {
              console.log(err);
              this.loadingForm = false;
              uni.showModal({
                title: "提示",
                content: err.msg,
              });
            });
        } else {
          console.log("验证失败");
        }
      });
    },
    onSelectProvince(val) {
      this.form.province = val[0].value;
    },
    onGotoDetail(item) {
      uni.navigateTo({
        url: `/pages/support/addedValueInfo?info=${JSON.stringify(item)}`,
      });
    },
  },
};
</script>

<style scoped lang="scss">
.main1 {
  z-index: auto;
  width: 750rpx;

  .mod3 {
    z-index: auto;
    width: 750rpx;
    height: 448rpx;
    .box1 {
      z-index: 9;
      height: 112rpx;
      background-color: rgba(255, 255, 255, 0);
      width: 750rpx;
      justify-content: flex-end;
      align-items: flex-end;
      padding-right: 22rpx;
      .section1 {
        z-index: auto;
        width: 696rpx;
        height: 77rpx;
        .bd1 {
          z-index: auto;
          width: 696rpx;
          height: 42rpx;
          justify-content: flex-start;
          .txt2 {
            z-index: 12;
            width: 122rpx;
            height: 42rpx;
            display: block;
            overflow-wrap: break-word;
            color: rgba(255, 255, 255, 1);
            font-size: 30rpx;
            letter-spacing: 0.3256578743457794rpx;
            white-space: nowrap;
            line-height: 42rpx;
            text-align: left;
          }
          .txt3 {
            z-index: 44;
            width: 255rpx;
            height: 40rpx;
            display: block;
            overflow-wrap: break-word;
            color: rgba(208, 208, 208, 1);
            font-size: 28rpx;
            letter-spacing: 0.3039473593235016rpx;
            white-space: nowrap;
            line-height: 40rpx;
            text-align: right;
            margin: 1rpx 10rpx 0 309rpx;
          }
          .info1 {
            z-index: 18;
            width: 199rpx;
            height: 40rpx;
            display: block;
            overflow-wrap: break-word;
            color: rgba(208, 208, 208, 1);
            font-size: 28rpx;
            letter-spacing: 0.3039473593235016rpx;
            white-space: nowrap;
            line-height: 40rpx;
            text-align: right;
            margin: 1rpx 0 0 392rpx;
          }
          .icon1 {
            z-index: 13;
            width: 32rpx;
            height: 32rpx;
            margin: 6rpx 0 0 8rpx;
          }
        }
        .bd2 {
          z-index: 11;
          width: 686rpx;
          height: 1rpx;
          background-color: rgba(84, 84, 84, 1);
          align-self: flex-start;
          margin-top: 34rpx;
        }
      }
    }
  }
  .info2 {
    z-index: 56;
    width: 138rpx;
    height: 48rpx;
    display: block;
    overflow-wrap: break-word;
    color: rgba(255, 255, 255, 1);
    font-size: 34rpx;
    letter-spacing: 0.36907893419265747rpx;
    font-family: PingFangSC-Medium;
    white-space: nowrap;
    line-height: 48rpx;
    text-align: left;
    align-self: flex-start;
    margin: 0rpx 0 20rpx 28rpx;
    font-weight: bold;
    border-left: 10rpx solid #ffbf10;
    padding-left: 20rpx;
  }
  .mod4 {
    z-index: 47;
    height: 112rpx;
    background-color: rgba(255, 255, 255, 0);
    width: 694rpx;
    margin: 0 28rpx;
    border-bottom: 1rpx solid #545454;
    .outer1 {
      z-index: auto;

      .mod5 {
        z-index: auto;
        height: 112rpx;
        align-items: center;
        justify-content: space-between;
        .word2 {
          z-index: 50;
          width: 364rpx;
          height: 42rpx;
          display: block;
          overflow-wrap: break-word;
          color: rgba(255, 255, 255, 1);
          font-size: 30rpx;
          letter-spacing: 0.3256578743457794rpx;
          white-space: nowrap;
          line-height: 42rpx;
          text-align: left;
        }
        .icon2 {
          z-index: 51;
          width: 32rpx;
          height: 32rpx;
          margin-top: 6rpx;
        }
      }
      .mod6 {
        z-index: 49;
        width: 686rpx;
        height: 1rpx;
        background-color: rgba(84, 84, 84, 1);
        align-self: flex-start;
        margin-top: 34rpx;
      }
    }
  }

  .img2 {
    z-index: 93;
    width: 750rpx;
    height: 68rpx;
  }
}
.fixed-footer {
  z-index: 95;
  width: 100%;
  background-color: #1c1c1e;
  position: absolute;
  left: 0;
  // bottom: 268rpx;
  bottom: 0rpx;
}
.paragraph1 {
  width: 100%;
  padding: 30rpx 32rpx 10rpx;
  box-sizing: border-box;
  text-align: center;
  display: block;
  overflow-wrap: break-word;
  color: rgba(208, 208, 208, 1);
  font-size: 24rpx;
  letter-spacing: 0.26052629947662354rpx;
  line-height: 33rpx;
  text-align: left;
  align-self: flex-start;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mod7 {
  width: 100%;
  padding: 16rpx 32rpx;
  box-sizing: border-box;

  .icon3 {
    z-index: 103;
    width: 26rpx;
    height: 26rpx;
  }
  .main2 {
    z-index: 108;
    width: 463rpx;
    overflow-wrap: break-word;
    text-align: left;
    white-space: nowrap;
    font-size: 0;
    .txt4 {
      font-size: 24rpx;
      color: rgba(208, 208, 208, 1);
      line-height: 33rpx;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .word3 {
      font-size: 24rpx;
      color: rgba(255, 255, 255, 1);
      line-height: 33rpx;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
}
.mod8 {
  height: 200rpx;
  margin-top: 22rpx;
  width: 750rpx;
  justify-content: flex-start;
  .box2 {
    z-index: auto;
    width: 750rpx;
    height: 112rpx;
    .outer2 {
      z-index: 102;
      width: 750rpx;
      height: 1rpx;
      background-color: rgba(84, 84, 84, 1);
    }
    .outer3 {
      z-index: 99;
      height: 96rpx;
      border-radius: 4rpx;
      background-color: rgba(255, 191, 16, 1);
      align-self: center;
      margin-top: 15rpx;
      width: 664rpx;
      justify-content: center;
      align-items: center;
      .info3 {
        z-index: 100;
        width: 65rpx;
        height: 45rpx;
        display: block;
        overflow-wrap: break-word;
        color: rgba(255, 255, 255, 1);
        font-size: 32rpx;
        letter-spacing: 0.34736838936805725rpx;
        white-space: nowrap;
        line-height: 45rpx;
        text-align: center;
      }
    }
  }
}
</style>
